<script setup>
import { ref } from "vue";
// 添加颜色转换函数（在 setup 外定义）
const hexToRgba = (hex, opacity) => {
  let r = parseInt(hex?.slice(1, 3), 16),
    g = parseInt(hex?.slice(3, 5), 16),
    b = parseInt(hex?.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
// prettier-ignore
const hours = [
  "西周", "春秋", "战国", "秦朝", "西汉", 
  "东汉", "三国", "两晋", "南北朝", "隋朝", 
  "唐朝", "五代", "北宋", "南宋", "元朝", 
  "明朝", "清朝"
];
// prettier-ignore
const days = [
  '天文地理', // 含历法/天文仪器
  '数学',     // 含算术/几何/代数
  '农学',     // 含农具/耕作/水利
  '医学',     // 含中医/药学/针灸
  '军事',     // 含兵器/战术/防御
  '工程技术', // 含建筑/机械/冶金
  '综合'  // 含物理/化学理论
];
// prettier-ignore
const data = [
  // 农学(0)
  [0,0,9], [0,1,12], [0,2,15], [0,3,7], [0,4,18], [0,5,21], [0,6,8], 
  [0,7,6], [0,8,11], [0,9,13], [0,10,25], [0,11,6], [0,12,14], [0,13,16], 
  [0,14,19], [0,15,34], [0,16,27],
  
  // 医学(1)
  [1,0,5], [1,1,8], [1,2,11], [1,3,6], [1,4,15], [1,5,20], [1,6,18],
  [1,7,13], [1,8,17], [1,9,9], [1,10,28], [1,11,7], [1,12,16], [1,13,19],
  [1,14,14], [1,15,22], [1,16,31],
  
  // 军事(2)
  [2,0,3], [2,1,7], [2,2,14], [2,3,10], [2,4,12], [2,5,17], [2,6,15],
  [2,7,9], [2,8,13], [2,9,11], [2,10,19], [2,11,8], [2,12,14], [2,13,16],
  [2,14,12], [2,15,27], [2,16,18],
  
  // 天文历法(3)
  [3,0,4], [3,1,6], [3,2,9], [3,3,5], [3,4,11], [3,5,14], [3,6,12],
  [3,7,8], [3,8,10], [3,9,7], [3,10,17], [3,11,5], [3,12,13], [3,13,15],
  [3,14,10], [3,15,19], [3,16,16],
  
  // 数学(4)
  [4,0,2], [4,1,5], [4,2,8], [4,3,4], [4,4,9], [4,5,12], [4,6,10],
  [4,7,7], [4,8,9], [4,9,6], [4,10,15], [4,11,4], [4,12,11], [4,13,13],
  [4,14,8], [4,15,17], [4,16,14],
  
  // 工程技术(5)
  [5,0,3], [5,1,6], [5,2,10], [5,3,8], [5,4,11], [5,5,15], [5,6,13],
  [5,7,9], [5,8,12], [5,9,10], [5,10,18], [5,11,7], [5,12,14], [5,13,16],
  [5,14,11], [5,15,23], [5,16,19],
  
  // 自然哲学(6)
  [6,0,1], [6,1,4], [6,2,7], [6,3,3], [6,4,6], [6,5,9], [6,6,8],
  [6,7,5], [6,8,7], [6,9,4], [6,10,12], [6,11,3], [6,12,8], [6,13,10],
  [6,14,6], [6,15,15], [6,16,11]
].map(item => [item[0], item[1], Math.round(item[2]/4.5)]);
const title = [];
const singleAxis = [];
const series = [];
days.forEach(function (day, idx) {
  const labelHeight = 10.7; // 标签区域高度
  const gap = 0; // 标签间距
  title.push({
    left: 10,
    textBaseline: "middle",
    // top: (idx) * 10 + 7 + "%", //控制y轴的上下平移
    top: `${idx * (labelHeight + gap) + labelHeight / 2 + 9}%`, // 动态计算位置
    text: day,
    textStyle: {
      fontSize: 14, // 调整字体大小
      color: "#666", // 可选：调整字体颜色
    },
  });
  singleAxis.push({
    left: 100,
    type: "category",
    boundaryGap: false,
    data: hours,
    // top: (idx) * 10 + 6 + "%",
    // height: 100 / 7 - 11 + "%",//控制每个x轴的间距
    top: `${idx * (labelHeight + gap) + 10}%`,
    height: `${labelHeight}%`,

    axisLabel: {
      interval: 0, //每0个显示一个
      show: idx === days.length - 1, // 只有最后一行显示轴文字
      rotate: 30, // 标签旋转30度防止重叠
      fontSize: 12,
      margin: 20, //上边距
      align: "center", //确保文字在刻度尺的正下方
      verticalAlign: "middle",
    },
    // 隐藏其他轴的轴线
    axisLine: {
      show: idx === days.length - 1,
    },
    // 隐藏其他轴的刻度
    axisTick: {
      show: idx === days.length - 1,
    },
  });
  series.push({
    // ...原有配置
    // itemStyle: {
    //   color: function(params) {
    //     // 将原有颜色转为 RGBA 并设置透明度
    //     return hexToRgba(option.value.color[params.dataIndex], 0.5); // 0.5 是透明度
    //   }
    // },
    singleAxisIndex: idx,
    coordinateSystem: "singleAxis",
    type: "scatter",
    // showEffectOn: "render",
    // rippleEffect: {
    //   show: true,
    //   brushType: "stroke",
    //   scale: 2.5,
    //   period: 4,
    // },
    data: [],

    symbolSize: function (dataItem) {
      return dataItem[1] * 3; //控制球的等比例大小
    },
  });
});
data.forEach(function (dataItem) {
  series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
});

const option = ref({
  // 合并主标题和轴分类标题
  title: [
    // 主标题配置
    {
      text: "各朝代领域发展情况",
      left: "center",
      top: 15, // 调整为 8px 留出空间
      textStyle: {
        fontSize: 18,
        fontWeight: "bold",
        color: "#333",
      },
    },
    // 原有的轴分类标题（通过展开运算符合并）
    ...title,
  ],
  color: [
    "#36724C",
    "#96a48d",
    "#3EA892",
    "#c79780",
    "#813c3f",
    "#4d7b9f",
    "#3f503b",
    "#DDB580",
    "#C26051",
    "#96CB9C",
    "#52CAC4",
    "#617750",
    "#225165",
  ],
  tooltip: {
    position: "top",
  },
  singleAxis: singleAxis,
  series: series,
});
</script>

<template>
  <!-- 科学成就的散点图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
